// scss 全局变量

//变量
$length: 0.88px;
$font-size: 1px;
$fontColor: rgba(255, 255, 255, 0.6);
$fontColorHover: rgba(255, 255, 255, 1);
$bgImage: linear-gradient(#edf5f8, #fafafa);
$pageWidth: 1550 * $length;

$index1: 100;
$index2: 200;
$index3: 300;
$index4: 400;
$index5: 500;

//混合
@mixin fontStyle($value1, $value2, $value3, $value4, $value5) {
  font-size: $value1 * $font-size;
  height: $value2 * $length;
  line-height: $value2 * $length;
  font-weight: $value3;
  color: $value4;
  text-align: $value5;
}

@mixin border-radius($radius) {
  border-radius: $radius;
  -ms-border-radius: $radius;
  -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
@mixin transform($value) {
  transform: $value;
  -webkit-transform: $value;
  -moz-transform: $value;
  -ms-transform: $value;
  -o-transform: $value;
}
@mixin transition($value) {
  transition: $value;
  -webkit-transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
}
@mixin box-shadow($value) {
  box-shadow: $value;
  -webkit-box-shadow: $value;
  -ms-box-shadow: $value;
  -moz-box-shadow: $value;
}
@mixin filter($value) {
  -webkit-filter: $value;
  -moz-filter: $value;
  -ms-filter: $value;
  filter: $value;
}

//继承
%flex-column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
%flex-column-spb {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
%flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
%flex-row-spb {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
%animate-transition {
  transition: 0.6s ease;
}
%cursorPointer {
  cursor: pointer;
}

//文字超出不换行
%nowrap {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

//行内元素垂直居中
%inlineBlockV {
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

//清除浮动
%clearFix {
  &:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: '.';
    height: 0;
  }

  & {
    *zoom: 1;
  }
}

//定义一些过渡

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

//icon
.fadeIcon-enter-active,
.fadeIcon-leave-active {
  transition: all 0.8s;
}

.fadeIcon-enter {
  opacity: 0;
  transform: scale(0.5);
}
.fadeIcon-leave-to {
  opacity: 0;
  transform: scale(1.2);
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
